<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FOMO</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no,viewport-fit=cover">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
    <style>
        body{
            background-image: url("./img/bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .container-box{
          height: 616px;
          width: 100%;
        }
        .container{
            width: 100%;
            padding: 0 20px 0 20px;
        }

        .title-box{
            overflow: hidden;
            height: 180px ;
        }
        .title-img{
            width: 130%;
            position: relative;
            top:-90px;
            left:-100px;
        }
        .bottom-box{
            height: 196px;
        }
        .calculate-box{
          width: 100%;
          height: 150px;
          text-align: center;
          margin-top: 60px;
        }
        .calculate-png{
          margin: 0 auto;
          width: 234px;
          height: 149px;
        }
        .next-btn{
          float: right;
          margin-top: 80px;
          margin-right: 80px;
        }
        .qstin-left{
          margin-top: 110px;
          margin-left: -80px;
        }
    </style>
</head>
<body>
    <div class="container-box">
      <div class="title-box">
        <img src="./img/question-top.png" class="title-img">
      </div>
      <div class="calculate-box">
        <img src="./img/calculate.png" class="calculate-png">
      </div>
      <img src="./img/next.png" class="next-btn">
      <div class="container">
        <img src="./img/question-left.png" class="qstin-left">
      </div>
    </div>

    <div class="bottom-box"></div>

    <script src="./plugins/jQuery/jquery.min.js"> </script>
    <script src="./plugins/bootstrap/js/bootstrap.min.js"> </script>
    <script>
      //get params
      function getParams(){
        var url=window.location.search;
        var params = {};
        if(url.indexOf("?") != -1){
          var str = url.substr(1);
          strs = str.split("&");

          for(i=0;i<strs.length;i++){
            var key =strs[i].split("=")[0]
            var value = strs[i].split("=")[1];
            params[key] = value;
          }
        }
        return params
      }

      $(function () {

      });

      $(".next-btn").click(function () {
        var params = getParams();
        var score = 14;
        if(typeof (params.score) != 'undefined'){
          score = params.score;
        }
        window.location.href = "./result.html?score="+score;
      });
    </script>
</body>
</html>
